<template>
    <div class="music-player">
        <svg-icon v-if="audio.playing" name="music-pause" @click="onPause" />
        <svg-icon v-else name="music" @click="onPlay" />
        <audio
            ref="audio"
            :src="src"
            controls
            @pause="onPause"
            @play="onPlay"
        />
    </div>
</template>

<script>
export default {
    name: 'MusicPlayer',
    props: {
        src: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            audio: {
                // 该字段是音频是否处于播放状态的属性
                playing: false
            }
        }
    },
    methods: {
        // 播放音频
        play() {
            this.$refs.audio.play()
        },
        // 暂停音频
        pause() {
            this.$refs.audio.pause()
        },
        // 当音频播放
        onPlay() {
            this.audio.playing = true
            this.play()
        },
        // 当音频暂停
        onPause() {
            this.audio.playing = false
            this.pause()
        }
    }
}
</script>

<style lang="scss" scoped>
.music-player {
    svg {
        font-size: 50px;
        margin-bottom: 15px;
    }
    audio {
        display: none;
    }
}
</style>
